<template>
  <div class="datail">
    <div class="swiper">
      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in imgs" :key="index">
            <img :src="image.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="goodInfo">
      <div class="goodInfo-title">{{goodsDatail.title}}</div>
      <p>
        市场价:
        <span>{{goodsDatail.market_price}}}</span>
        销售价
        <em>{{goodsDatail.sell_price}}</em>
      </p>
      <div class="count">
        <span>购买数量</span>
        <van-stepper v-model="value" />
      </div>
      <div class="btns">
        <van-button type="info">立即购买</van-button>
        <van-button type="danger" @click="shoppingCart">加入购物车</van-button>
      </div>
    </div>
    <div class="goodParams">
      <div class="title">商品参数</div>
      <div class="body">
        <p>商品货号: SD7159810321</p>
        <p>库存情况: 200件</p>
        <p>上架时间: 2015-04-19T17:00:58.000Z</p>
      </div>
      <div class="btns">
        <van-button plain type="info" size="large" @click="goodsdesc">图文介绍</van-button>
        <van-button plain type="danger" size="large" @click="comment">商品评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      id: this.$route.params.id,
      imgs: [],
      goodsDatail: {},
      value: 1
    }
  },
  created() {
    this.getGoodsDataImgs()
  },
  methods: {
    ...mapMutations(['addN']),
    async getGoodsDataImgs() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.id}`
      )
      if (res.status !== 0) {
        return this.$toast.fail('获取轮播图片失败!')
      }
      this.imgs = res.message

      const { data: res1 } = await this.$http.get(
        `/api/goods/getinfo/${this.id}`
      )
      if (res1.status !== 0) {
        return this.$toast.fail('获取数据失败!')
      }

      this.goodsDatail = res1.message[0]
    },
    comment() {
      this.$router.push(`/goodscomments/${this.id}`)
    },
    shoppingCart() {
      const NewCar = {
        id: this.id,
        price: this.goodsDatail.sell_price,
        count: this.value,
        selected: true
      }

      var car = JSON.parse(window.localStorage.getItem('car'))
      if (car === null) {
        car = []
        car.push(NewCar)
        localStorage.setItem('car', JSON.stringify(car))
      } else {
        const a = car.findIndex(item => item.id == NewCar.id)
        if (a !== -1) {
          car[a].count += NewCar.count
          localStorage.setItem('car', JSON.stringify(car))
        } else {
          car.push(NewCar)
          localStorage.setItem('car', JSON.stringify(car))
        }
      }

      this.addN(NewCar.count)
    },
    goodsdesc() {
      this.$router.push(`/goodsdesc/${this.id}`)
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

<style lang="less" scoped>
.datail {
  padding: 10px;
}
.swiper {
  height: 230px;
  border: 1px solid #ccc;
  border-radius: 3px;
  .van-swipe {
    text-align: center;
    height: 200px;
    .van-swipe-item {
      text-align: center;
      img {
        height: 100%;
      }
    }
  }
}
.goodInfo {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .goodInfo-title {
    border-bottom: 1px solid #ccc;
  }
  p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
    span {
      text-decoration: line-through;
      margin: 0 10px;
    }
    em {
      font-weight: 700;
      font-size: 16px;
      color: red;
      font-style: normal;
    }
  }
  .count {
    padding: 10px;
    span {
      font-size: 14px;
      color: #8f8f94;
    }
    .van-stepper {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .van-button {
    margin: 3px 3px;
    height: 33px;
    line-height: 33px;
  }
}
.goodParams {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .title {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .body {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    p {
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .btns {
    margin-top: 10px;
    .van-button {
      height: 39px;
      line-height: 39px;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
}
</style>
